/*! @import "main"; */
/*!
 * custom
 */
html,
body {
	height: 100%;
}
html {
	font-size: 100%;
	/*!
	 * set the parent to background transparent
	 * css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
	 */
	background-color: transparent;
}
body {
	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI","Segoe WP",sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.500;
	width: 100%;
	color: #363636;
	background-color: #FFFFFF;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	text-rendering: optimizeLegibility;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
	/* -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; */
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
/*!
 * englishextra specific rules
 */
a {
	color: inherit;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
}
a:hover,
a:active,
a:focus {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}
p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}
b,
strong,
.bolder {
	font-weight: bold;
}
i,
em,
.italic {
	font-style: italic;
}
u,
.underline {
	text-decoration: underline;
}
*,*:after,
*::before {
	box-sizing: border-box;
}
::-moz-selection {
	color: rgba(255,255,255,0.9);
	background: rgba(48,124,202,0.9);
}
::selection {
	color: rgba(255,255,255,0.9);
	background: rgba(48,124,202,0.9);
}
/*!
 * clearfix css-tricks.com/snippets/css/clear-fix/
 */
.cf:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0;
}
/*!
 * fit width
 */
.fit-width {
	min-width: 100%;
}
/*!
 * hide and show on mobile
 */
.show-inline-on-mobile,
.show-block-on-mobile {
	display: none !important;
}
@media handheld,only screen and (max-width:800px) {
	.hide-on-mobile {
		display: none !important;
		width: 0;
		height: 0;
	}
	.show-inline-on-mobile {
		display: inline !important;
	}
	.show-block-on-mobile {
		display: block !important;
	}
}
/*!
 * fixes to Simple Grid
 */
.grid:last-child,
.grid-narrow:last-child {
	margin-bottom: 24px;
}
.grid .col .content h1,
.grid .col .content h2:first-child,
.grid .col .content h3:first-child,
.grid .col .content p:first-child,
.grid-narrow .col .content h1,
.grid-narrow .col .content h2:first-child,
.grid-narrow .col .content h3:first-child,
.grid-narrow .col .content p:first-child {
	margin-top: 0;
}
.grid .col .content h2.btn-expand-hidden-layer:first-child,
.grid-narrow .col .content h2.btn-expand-hidden-layer:first-child {
	margin-top: 1.500rem;
}
.grid .col .footer p,
.grid-narrow .col .footer p {
	text-align: center;
}
/*!
 * layout
 */
.page {
	width: 100%;
	height: 100%;
	position: relative;
	left: 0;
	background-color: transparent;
}
body,
.page {
	background-image: linear-gradient(rgba(242,242,242,1), rgba(242,242,242,1));
	background-size: 100% 33.000pt;
	background-position: top left;
	background-repeat: no-repeat;
}
.page.is-active {
	position: relative;
	left: 280px;
}
.container {
	width: 100%;
	/*!
	 * set the parent to min height 100%, not just height
	 * css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
	 */
	min-height: 100%;
	opacity: 0;
	-webkit-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	margin: 0 auto;
	padding: 33.000pt 0 0 0;
}
.container-includes {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
}
.container .content-wrapper,
.container-includes .content-wrapper {
	min-height: 100%;
	background-color: #FFFFFF;
}
.container .content-wrapper:after,
.container-includes:after {
	content: "";
	display: table;
	clear: both;
}
/*!
 * nav menu
 */
.page,
.panel-nav-menu,
.btn-nav-menu {
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
.panel-nav-menu,
.panel-nav-menu li {
	position: relative;
}
.panel-nav-menu {
	display: block;
	width: 280px;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	font-size: 0.875em;
	line-height: 3.143em;
	list-style: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
	background: #2E2E2E;
	padding: 0;
	margin: 0;
	margin-left: -280px;
	z-index: 998;
}
.panel-nav-menu li {
	font-weight: 300;
	padding: 0;
	margin: 0;
}
.panel-nav-menu li a {
	display: block;
	text-decoration: none;
	white-space: normal;
	white-space: nowrap;
	color: #FFFFFF;
	border: none;
	padding: 0 1.143em;
}
.panel-nav-menu li a:hover,
.panel-nav-menu li a:focus {
	background: #464646;
}
.panel-nav-menu li a.is-active {
	background: rgba(30,77,125,1);
}
.panel-nav-menu li a:before {
	font-family: "englishextra-ui-icons";
	content: "\e918\00a0\00a0";
	font-size: 0.875em;
}
.btn-nav-menu {
	display: inline-block;
	width: 33.000pt;
	height: 33.000pt;
	position: fixed;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 999;
}
.btn-nav-menu:hover {
	background-color: rgba(213,213,213,1);
}
/*!
 * using icon font
 */
.btn-nav-menu {
	text-align: center;
	background: none rgba(211,211,211,0.5);
}
.btn-nav-menu:before {
	font-family: "englishextra-ui-icons";
	content: "\e914";
	font-size: 18.000pt;
	line-height: 33.000pt;
	color: #848484;
}
.page.is-active .btn-nav-menu:before {
	font-family: "englishextra-ui-icons";
	content: "\e90a";
	font-size: 15.000pt;
}
.page.is-active .panel-nav-menu {
	left: 280px;
	width: 280px;
}
.page.is-active .btn-nav-menu {
	/*!
	 * position absolute
	 * left: 0;
	 * position fixed
	 * left: 280px;
	 */
	left: 280px;
}
/*!
 * menu more
 */
.btn-menu-more {
	display: inline-block;
	width: 33.000pt;
	height: 33.000pt;
	position: absolute;
	top: 0;
	left: 33.000pt;
	text-decoration: none;
	-webkit-transition: background 0.2s linear;
	transition: background 0.2s linear;
	cursor: pointer;
	z-index: 999;
}
.btn-menu-more:hover {
	background-color: rgba(213,213,213,1);
}
/*!
 * using icon font
 */
.btn-menu-more {
	text-align: center;
	background: none rgba(211,211,211,0.5);
}
.btn-menu-more:before {
	font-family: "englishextra-ui-icons";
	content: "\e915";
	font-size: 18.000pt;
	line-height: 33.000pt;
	color: #848484;
}
.holder-panel-menu-more {
	display: block;
	position: absolute;
	top: 33.000pt;
	left: 33.000pt;
	color: #363636;
	background: #F0F0F0;
	border: 0.750pt solid rgba(45,116,189,1);
	box-shadow: 0.125em 0.125em 0.125em 0 rgba(50,50,50,0.3);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: visibility 0s,opacity 0.1s linear;
	transition: visibility 0s,opacity 0.1s linear;
	z-index: 999;
}
.holder-panel-menu-more.is-active {
	visibility: visible;
	opacity: 1;
}
.panel-menu-more {
	display: inline-block;
	min-width: 204.000pt;
	width: 100%;
	height: 100%;
	font-size: 0.857em;
	line-height: 1.500;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.panel-menu-more li a {
	display: block;
	font-weight: 400;
	padding: 0.625em 0.750em;
}
.panel-menu-more li a:hover,
.panel-menu-more li a:active,
.panel-menu-more li a:focus {
	text-decoration: none;
	color: inherit;
	background-color: rgba(190,212,235,1);
}
/*!
 * search form
 */
.holder-search-form {
	display: inline-block;
	width: 153.000pt;
	position: fixed;
	top: 4.500pt;
	right: 4.500pt;
	z-index: 997;
}
.holder-search-form input[type^=text],
.holder-search-form input[type^=search] {
	width: 100%;
	height: 24.000pt;
	font-size: 1.000em;
	color: inherit;
	border-color: transparent;
	border-style: solid;
	border-width: 0.750pt;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
	padding-left: 2.000em;
}
.holder-search-form input[type^=text]:active,
.holder-search-form input[type^=text]:focus,
.holder-search-form input[type^=search]:active,
.holder-search-form input[type^=search]:focus {
	background-color: rgba(213,213,213,1);
	border-color: transparent;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
}
/* @media only screen and (max-width: 570px) {
	.holder-search-form {
		width: 5.500em;
	}
} */
@media only screen and (max-width: 479px) {
	.holder-search-form {
		display: none;
	}
}
/*!
 * using icon font
 */
.holder-search-text:before,
.ya-site-form:before {
	position: absolute;
	top: 0.063em;
	left: 0.625em;
	font-family: "englishextra-ui-icons";
	content: "\e91c";
	/* -webkit-transform: scaleX(-1);
	-ms-transform: scaleX(-1);
	transform: scaleX(-1); */
	font-size: 12.000pt;
	line-height: 24.000pt;
	color: #848484;
}
.holder-search-form input[type^=text],
.holder-search-form input[type^=search] {
	background: none rgba(211,211,211,0.5);
}
/*!
 * fix for yandex search
 * site.yandex.net/v2.0/js/suggest.js
 */
.holder-search-form table td {
	padding: 0 !important;
}
.ya-site-form.ya-site-form_inited_no {
	visibility: hidden;
}
.ya-page_js_yes .ya-site-form_inited_no,
.ya-site-form__submit {
	display: none !important;
}
/*!
 * fixes to typeboost.css
 * modularscale.com
 * github.com/modularscale/modularscale-sass
 * ----------------
 * $ms-base: 1em;
 * $ms-ratio: 1.5,1.1;
 * ----------------
 * ms(16) / 3.452em
 * ms(15) / 3.375em
 * ms(14) / 3.138em
 * ms(13) / 2.853em
 * ms(12) / 2.594em
 * ms(11) / 2.358em
 * ms(10) / 2.25em
 * ms(9) / 2.144em
 * ms(8) / 1.949em
 * ms(7) / 1.772em
 * ms(6) / 1.611em
 * ms(5) / 1.5em
 * ms(4) / 1.464em
 * ms(3) / 1.331em
 * ms(2) / 1.21em
 * ms(1) / 1.1em
 * ms(0) / 1em
 * ms(-1) / 0.909em
 * ms(-2) / 0.826em
 * ms(-3) / 0.751em
 * ms(-4) / 0.683em
 * ms(-5) / 0.667em
 * ms(-6) / 0.621em
 */
.col a {
	font-weight: inherit;
	color: #307CCA;
}
.col a:hover,
.col a:active,
.col a:focus {
	color: #EA6743;
}
.col a:visited {
	color: #8F9BA8;
}
.col a[rel="footnote"] {
	border-bottom: none;
}
.col a[rel="footnote"]:before {
 	content: attr(data-footnote);
	font-size: 0.625em;
	position: relative;
	top: -0.625em;
	font-size: 50%;
	margin-left: 0.188em;
}
.col .footnote:before {
 	content: attr(data-footnote);
	font-size: 0.625em;
	position: relative;
	top: -0.625em;
	font-size: 50%;
	margin-right: 0.188em;
}
.col h1 {
	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI Light","Segoe WP Light",sans-serif;
	font-weight: 300;
	line-height: 1.200;
	color: inherit;
	margin-top: 0 !important;
	margin-bottom: 0.500rem;
}
.col h2 {
	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI","Segoe WP",sans-serif;
	font-weight: 400;
}
.col dl dt {
	font-weight: bolder;
	text-decoration: none;
}
.col dl dt a {
	color: inherit;
	border-bottom-color: inherit;
	border-bottom-style: solid;
	border-bottom-width: 0.750pt;
}
.col dl dt a:hover,
.col dl dt a:active,
.col dl dt a:focus {
	color: inherit;
}
.col li ol,
.col li ul {
	margin-top: 0 !important;
}
.col img,
.col svg,
.col canvas,
.col video,
.col textarea {
	width: 100%;
}
.col img.inline {
	width: auto;
}
.col img,
.col svg,
.col canvas {
	height: auto;
}
.col video,
.col svg {
	display: block;
	padding: 0;
}
.col canvas {
	vertical-align: bottom;
}
.col .holder-contents-select + canvas {
	margin-top: 1.500rem;
}
.col h2+div form p:first-child {
	margin-top: 0;
}
.col select optgroup {
	font-style: normal;
	padding-left: 0.188rem;
}
.col table.respond {
	width: auto;
}
.col table {
	border: none;
	border-top-width: 0.750pt;
	border-top-style: solid;
	border-top-color: #C3C3C3;
	border-right-width: 0.750pt;
	border-right-style: solid;
	border-right-color: #C3C3C3;
	border-left-width: 0.750pt;
	border-left-style: solid;
	border-left-color: #C3C3C3;
}
.col table th {
	border: none;
	border-bottom-width: 0.750pt;
	border-bottom-style: solid;
	border-bottom-color: #C3C3C3;
}
.col table td {
	border: none;
	border-bottom-width: 0.750pt;
	border-bottom-style: solid;
	border-bottom-color: #C3C3C3;
}
.col table td.with-img-only {
	padding: 0.500rem;
}
@media screen and (max-width: 640px) {
	.col table.respond {
		border: none;
	}
	.col table.respond,
	.col table.respond tr,
	.col table.respond td {
		display: block;
		box-sizing: border-box;
	}
	.col table.respond tr {
		width: 100%;
		position: relative;
		float: left;
		border: 0.750pt solid #C3C3C3;
		border-bottom: none;
		margin-bottom: 1.500rem;
	}
	.col table.respond tr:last-child {
		margin-bottom: 0;
	}
	.col table.respond thead {
		display: none;
	}
	.col table.respond td::before {
		display: block;
		float: left;
		content: attr(data-label);
		font-weight: bold;
		text-align: right;
		padding-right: 0.625rem;
	}
}
.col hr,
.col .hr {
	height: 0.750pt;
	background: #C3C3C3;
}
.col a.reflink {
	font-size: 0.875rem;
	letter-spacing: 0.063rem;
	color: #949494;
	border-bottom: none;
}
.col .highlight {
	color: #EE6944;
}
.col .phonetic {
	font-family: "Source Code Pro","Consolas",monospace;
}
.col .bolder {
	font-weight: 700;
}
.col .italic {
	font-style: italic;
}
.col .underline {
	text-decoration: none;
	border-bottom-width: 0.750pt;
	border-bottom-style: solid;
	border-bottom-color: inherit;
}
.col .button-larger {
	font-size: 1.000rem;
	font-weight: 400;
	height: 2.250rem;
}
/*!
 * aside block
 */
.col .aside {
	display: block;
	background-color: #F0F0F0;
	padding: 1.000rem;
}
.aside h3 {
	font-family: "Source Sans Pro","Open Sans","Exo2","Fira Sans","Segoe UI Light","Segoe WP Light",sans-serif;
	font-weight: 300;
	font-size: 1.331rem;
}
.aside p {
	font-size: 0.875rem;
}
.aside caption,
.aside table th,
.aside table td {
	font-size: 0.813rem;
}
/*!
 * contents selector
 */
.col .holder-contents-select {
	display: block;
	width: 100%;
	text-align: left;
}
.col .holder-contents-select select {
	display: inline-block;
	width: 97%;
	max-width: 20.375rem;
	height: 2.000rem;
	font-family: sans-serif;
	font-size: 0.875rem;
	color: inherit;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline: none;
	margin: 0;
	padding: 0;
}
.col .holder-contents-select select optgroup {
	font-style: normal;
	padding-left: 0.188rem;
}
/*!
 * fix select border for electron
 */
.col .holder-contents-select select,
.col .holder-contents-select select:hover,
.col .holder-contents-select select:active,
.col .holder-contents-select select:focus {
	border: 0.750pt solid #C3C3C3;
}
/*!
 * expanding layer
 */
.col .btn-expand-hidden-layer {
	cursor: pointer;
}
.col .btn-expand-hidden-layer:after {
	font-family: "englishextra-ui-icons";
	content: "\e901";
	font-size: 0.438em;
	position: relative;
	vertical-align: middle;
	margin-left: 0.500em;
}
.col .btn-expand-hidden-layer.is-active:after {
	font-family: "englishextra-ui-icons";
	content: "\e907";
	font-size: 0.438em;
	position: relative;
	vertical-align: middle;
	margin-left: 0.500em;
}
.col .holder-hidden-layer {
	max-height: 0;
	position: relative;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	overflow: hidden;
}
.col .holder-hidden-layer.is-active,
.legacy .col .holder-hidden-layer {
	max-height: 100%;
	overflow-y: auto;
}
.col .holder-btn-expand-hidden-layer + .holder-hidden-layer.is-active,
.legacy .col .holder-btn-expand-hidden-layer + .holder-hidden-layer {
	margin-top: 0.500rem;
}
.col .holder-hidden-layer h3:first-child,
.col .holder-hidden-layer p:first-child,
.col .holder-hidden-layer table:first-child,
.col .holder-hidden-layer ol:first-child,
.col .holder-hidden-layer ul:first-child {
	margin-top: 0;
}
.col .holder-hidden-layer p:last-child,
.col .holder-hidden-layer table:last-child,
.col .holder-hidden-layer ol:last-child,
.col .holder-hidden-layer ul:last-child {
	margin-bottom: 0;
}
/*!
 * footer
 */
.col .footer {
	border-top: 0.750pt solid #C3C3C3;
}
.col .footer p {
	font-size: 0.813rem;
	line-height: 1.500;
}
/*!
 * retina
 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}
/*!
 * font for mobile
 * iosfonts.com/
 * google.com/design/spec/style/typography.html#typography-language-categorization
 * msdn.microsoft.com/en-us/library/windows/apps/hh202920%28v=vs.105%29.aspx
 */
@media only screen and (max-width: 480px) {
}
/*!
 * media queries
 */
@media only screen and (max-width: 20em) {
	html {
		font-size: 85.7%;
	}
}
@media only screen and (min-width: 20.063em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 20.063em) and (max-width: 30em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 30.063em) {
	html {
		font-size: 107.1%;
	}
}
@media only screen and (min-width: 30.063em) and (max-width: 40em) {
	html {
		font-size: 107.1%;
	}
}
@media only screen and (min-width: 40.063em) {
	html {
		font-size: 121.4%;
	}
}
@media only screen and (min-width: 40.063em) and (max-width: 50em) {
	html {
		font-size: 121.4%;
	}
}
@media only screen and (min-width: 50.063em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 50.063em) and (max-width: 60em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 60.063em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 60.063em) and (max-width: 64em) {
	html {
		font-size: 92.2%;
	}
}
@media only screen and (min-width: 64.063em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 64.063em) and (max-width: 74em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 74.063em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 74.063em) and (max-width: 80em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 80.063em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 80.063em) and (max-width: 90em) {
	html {
		font-size: 100%;
	}
}
@media only screen and (min-width: 90.063em) {
	html {
		font-size: 107.1%;
	}
}
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
	html {
		font-size: 107.1%;
	}
}
@media only screen and (min-width: 120.063em) {
	html {
		font-size: 114.3%;
	}
}
